* {
    margin: 0px;
    padding: 0px;
}

#var() {
    @fenhong: #f2b9b2;
    @haitaolan: #2775b6;
    @naihuang: #fffdd0;
    @qianhui: #D3D3D3;
    @kabuqinuo: rgba(215, 188, 171, 1);
    @contentTextStyle: rgba(0, 0, 0, 0.7);
}

#rules() {
    .containerHeaderElements {
        display: block;
        align-self: center;
    }

    .borderBottomStyle {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .topAndBottomSeparation {
        margin: 15px 0px;
    }

    .topAndBottomSeparationText {
        margin: 6px 0px;
    }

    .siderListStyle {
        list-style-type: none;
        background-color: @naihuang;
        border-radius: 10px;
        color: @contentTextStyle;
        #rules.topAndBottomSeparation();
    }
}

#var();

.container {
    width: 100vw;
    height: 100vh;
    padding: 0px 50px;
    box-sizing: border-box;

    .header {
        height: 70px;
        width: 100%;
        #rules.borderBottomStyle();
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;

        h1 {
            #rules.containerHeaderElements();
            height: 55px;
            color: @fenhong;
        }

        button {
            #rules.containerHeaderElements();
            height: 35px;
            width: 80px;
            background-color: @fenhong;
            border: none;
            border-radius: 20px;
            font-weight: 700;
        }
    }

    .main {
        #rules.topAndBottomSeparation();
        width: 100%;
        height: calc(100vh - 50px); //在calc函数里，运算符前后需要有空格，正确的写法是calc(100vh - 50px)，而非calc(100vh-50px)
        display: flex;
        justify-content: space-between; //作用于设置了flex布局的父元素的直接子元素

        .center {
            width: 70%;
            margin-right: 20px;

            .top {
                .tagsList {
                    #rules.topAndBottomSeparationText();
                    list-style-type: none;
                    display: flex;
                    font-size: 13px;
                    color: @fenhong;

                    li {
                        margin-right: 10px;
                    }
                }

                .content {
                    color: @contentTextStyle;
                    display: -webkit-box;
                    /* 设置为WebKit内核的弹性盒子模型 */
                    -webkit-box-orient: vertical;
                    /* 标准属性，增强兼容性 */
                    -webkit-line-clamp: 3; 
                    /* 限制显示三行 */
                    overflow: hidden;
                    /* 隐藏超出范围的内容 */
                    text-overflow: ellipsis;
                    /* 使用省略号 */
                }

                .content-continue {
                    #rules.topAndBottomSeparationText();
                    display: flex;
                    justify-content: center;
                    font-size: 10px;
                    color: @kabuqinuo;

                    &:hover {
                        color: @fenhong;
                    }
                }

                #pushTime {
                    #rules.topAndBottomSeparationText();
                    font-size: 10px;
                    color: @fenhong;
                }

                #rules.borderBottomStyle();
            }

            .bottom {
                #rules.topAndBottomSeparation();

                .newArticle {
                    .newArticleList {
                        list-style-type: none;
                        color: @contentTextStyle;
                        #rules.topAndBottomSeparation();

                        li {
                            #rules.topAndBottomSeparationText();
                        }
                    }

                    #rules.borderBottomStyle();
                }

                .newArticlePage {
                    .newArticlePageList {
                        list-style-type: none;
                        display: flex;
                        font-size: 13px;
                        text-align: center;
                        color: @naihuang;

                        li {
                            background-color: @fenhong;
                            height: 20px;
                            width: 20px;
                            margin: 10px 3px;
                            border-style: 1px solid @fenhong;
                            border-radius: 50%;

                            &:hover {
                                color: @haitaolan;
                            }
                        }
                    }

                    #rules.borderBottomStyle();
                }
            }
        }

        .sider {
            width: 30%;

            .top {
                width: 100%;

                .hotList {
                    #rules.siderListStyle();

                    li {
                        padding: 6px 10px;
                        &:hover {
                            color: @haitaolan;
                        }
                    }
                }

            }

            .bottom {
                #rules.topAndBottomSeparation();

                .commandList {
                    #rules.siderListStyle();

                    li {
                        padding: 6px 10px;
                        &:hover {
                                color: @haitaolan;
                            }
                    }
                }
            }
        }
    }
}